{% extends "base.html" %}
{% block content %}
<body>
    <style>
        #preview {
            height:500px;
            width:50%;
            margin-left:10px;
            overflow-y: scroll;
            border-radius: 8px;
            border: 2px solid grey;
            padding: 5px;
        }
    </style>
    <h1 style="text-align:center">Edit Post</h1>
    <form method="POST">
        <div>
            <label for="title">Title:</label>
            <input type="text" id="title" name="title" value="{{ post.title }}">
        </div>
        <div style="display: flex"><label style="width: 50%">Content</label><label style="width: 50%">Preview</label></div>
        <div style="display: flex;">
            <textarea id="content" name="content" style="height: 500px; width: 50%; overflow-y: scroll">{{ post.content }}</textarea>
            <div id="preview"></div>
        </div>
        <label for="topic">Topic:</label>
        <input type="text" id="topic" name="topic" value="{{ post.topic }}">
        <input type="submit" value="Update Post" class="button">
    </form>
    <a href="{{ url_for('view_post', post_id=post.id) }}" class="button">Cancel</a>
</body>
<script>
    window.onload = function load(){
        document.getElementById("home").className="active";
    }
</script>
{% endblock %}
{% block add %}
    <link rel="stylesheet" href="/static/dark.css">
    <link rel="stylesheet" href="/static/github-markdown-dark.css">
    <script src="/static/js/highlight.js"></script>
    <script src="/static/js/javascript.js"></script>
    <script src="/static/js/marked.js"></script>
    <script>
        function view(){
            var content = document.getElementById("content").value;
            document.getElementById("preview").innerHTML = marked.parse(content);
            hljs.highlightAll();
            MathJax.typeset();
        }
        setInterval(view, 200);
    </script>
{% endblock %}
